<template>
	<!-- class="d-flex border-top border-light-secondary" style="height: 100%;box-sizing: border-box;" -->
	<view class="d-flex   border-top border-light-secondary" style="height: 100%;  box-sizing: border-box;">

		<scroll-view scroll-y="true" style="flex: 1; height: 100%;" class="border-right border-light-secondary" :scroll-top='leftScrollTop'
		 :scroll-with-animation="true" id='leftScroll'>


			<view class="d-flex a-center j-center  border-bottom    left-scroll-item " style="height: 80upx;" v-for='(i,index) in Cate'
			 :class="index==currentIndex?'class-active':'' " @click='changeIndex(index)'>
				{{i.name}}
			</view>

		</scroll-view>

		<scroll-view scroll-y="true" style="flex: 3.5; height: 100%;" class="border-right border-light-secondary" :scroll-top='rightScrollTop'
		 @scroll="onRightScroll" :scroll-with-animation="true">

			<view class="d-flex a-center j-center  border-bottom    right-scroll-item " >

				<view class="row ">

					<!-- class="span24-8  text-center  py-2" -->
					<!-- class="d-flex  flex-column  a-center " -->
					<view class="span24-8  text-center  py-2" v-for='(item,index) in rightCate.app_category_items'
					@click="gotoDetail(item.id)"
					
					
					>
						<img :src="item.cover" alt="" style="width: 120upx;height: 120upx;">
						<text class="d-block"> {{item.name}} xxx</text>
					</view>

				</view>

			</view>


		</scroll-view>



	</view>
</template>

<script>
	export default {
		data() {
			return {
				Cate: [], //定义左边分类
				rightCate: [], //定义右边分类

				currentIndex: 0,
				leftDomsTop: [], // 左边dom高度的容器
				rightDomsTop: [], // 定义右边dom高度的容器
				leftScrollTop: 0, // 定义使左边滚动到具体哪个位置
				rightScrollTop: 0, //定义使右边滚动到具体哪个位置
				cateItemHeight: 0 //左边每个导航栏的高度

			}
		},
		methods: {

			changeIndex(index) {
				this.currentIndex = index
				this.rightScrollTop = this.rightDomsTop[index]; //点击左边的时候 联动右边 让右边跟随索引滚动
				 this.rightCate=this.Cate[index]
				
				
			},

			async onRightScroll(e) {
				console.log(e.detail.scrollTop)
				let scrollTopDom = e.detail.scrollTop
				this.rightDomsTop.forEach((v, index) => {
					// console.log(v)
					let leftTopHeight = v; //上一个值
					let nextTopHeight = this.rightDomsTop[index + 1]; //下一值	 
					if (leftTopHeight < scrollTopDom && scrollTopDom < nextTopHeight) {
						this.currentIndex = index
					}
				})
			},

			__initClassData() {
				this.$api.get({
					url: '/category/app_category'
				}).then(res => {
						console.log(res)
						this.Cate = res.data;
						this.rightCate=res.data[0]
						console.log(this.rightCate)





					})
				},
				//跳转到商品详情 
				gotoDetail(id) {
					uni.navigateTo({
						url:'../detail/detail?id='+id
					})
				}
				

			},
			watch: {
				currentIndex(newIndex, oldIndex) {
					// console.log('xxxx')

					const query = uni.createSelectorQuery().in(this);
					query.select('#leftScroll').fields({
						size: true,
						scrollOffset: true
					}, data => {

						console.log(data)
						let H = data.height; //
						console.log('大容器的高度', H)
						let ST = data.scrollTop;
						console.log("大容器滚出去的高度", ST)
						// 上边  
						if (ST > this.cateItemHeight) {
							console.log('第一页')
							//this.cateItemHeight    41
							this.leftScrollTop = this.leftDomsTop[newIndex] //  this.leftDomsTop[newIndex]   不可能大于600
						}
						// // 下边
						if ((this.leftDomsTop[newIndex] + this.cateItemHeight) > (H + ST)) {
							console.log('第二页')
							return this.leftScrollTop = this.leftDomsTop[newIndex] + this.cateItemHeight - H
						}

					}).exec()
				}
			},

			mounted() {
				// 初始化获取数据
				this.__initClassData()
			},


			onReady() {






				//获取右边的dom高度
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.right-scroll-item').boundingClientRect(data => {
					// console.log(data)
					// let aaa= data.map(v=>{
					// 	  return  v.top
					//   }) 
					//   console.log(aaa)  
					//   this.rightDomsTop=aaa;
					this.rightDomsTop = data.map(v => v.top)
				}).exec()


				//获取左边所有导航分类的高度以及需要滚出去的高度
				query.selectAll('.left-scroll-item').boundingClientRect(data => {
					// console.log(data)
					// let aaa= data.map(v=>{
					// 	  return  v.top
					//   }) 
					//   console.log(aaa)  
					//   this.rightDomsTop=aaa;

					console.log(data)
					this.leftDomsTop = data.map(v => {

						this.cateItemHeight = v.height
						return v.top
					})
				}).exec()





			}
		}
		
		
</script>

<style>
	.class-active {
		border-left: 8upx solid #FD6801;
		color: #FD6801 !important;
	}
</style>
